@charset "utf-8";





.nav {
  .nav-bar {
    height: 40px;
    font-size: 12px;
    background-color: #333;
    z-index: 30;
    color: #b0b0b0;
    .container {
      height: 40px;
      .topbar-nav {
        float: left;
        height: 40px;
        line-height: 40px;
        a {
          color: #b0b0b0;
          line-height: 40px;
        }
        a:hover {
          color: #fff;
          cursor: pointer;
        }
        span {
          margin: 3px;
          color: #424242;
        }
      }
      .log {
        float: right;
        line-height: 40px;
        height: 40px;
        span {
          margin: 3px;
          color: #424242;
        }
        a {
          color: #b0b0b0;
          padding: 0 5px;
          
        }
        .regist{
          background-color: #333;
          border: none;
        }

        a:hover {
          color: #fff;
          cursor: pointer;
        }
      }
      .shop {
        height: 40px;
        width: 120px;
        margin-left: 15px;
        position: relative;
        float: right;
        > a {
          display: block;
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #b0b0b0;
          background: #424242;
          > img {
            height: 20px;
            margin-left: 4px;
            display: inline-block;
            vertical-align: -4px;
          }
        }
      }
    }
    .site {
      height: 100px;
      .container {
        .logo {
          float: left;
          width: 62px;
          margin-top: 22px;
          a {
            height: 56px;
            width: 56px;
            display: block;
            background: url(../img/logo.png) no-repeat;
            overflow: hidden;
          }
        }
        .site-nav {
          width: 850px;
          float: left;
          .nav-list {
            float: left;
            height: 88px;
            width: 850px;
            padding: 12px 0 0 30px;
            font-size: 16px;
            margin: 0;

           
           .li-conceal{
             float: left;

              a{
                
                  float: left;
              padding: 26px 10px 38px;
              color: #333;
                
              }
              .item-children{
                overflow: hidden;
                height: 0;
                position: absolute;
                top: 128px;
                left: 0;
                right: 0;
                border-top: 1px solid #ccc;
                z-index: 100;
               background: #fff;
                .item-k{
                 
                  ul{
                  
                    li{
                      display: block;
                      width: 16.6%;
                     float: left;
              
                      a{
                        color: #757575;
                        text-align: center;
                        .item-thumb{
                          display: block;
                          width: 160px;
                          height: 110px;
                          img{
                            width: 100%;
                            height: 100%;
                            border-right: 1px solid #ccc;
                          }
                          .item-p{
                            border: none;
                          }
                        }
                        .title{
                          margin-top: 10px;
                          margin-bottom: 10px;
                          font-size: 12px;
                        }
                        p{
                          color: orange;
                          font-size: 12px;
                        }
                      }
                    }
                  }
                }
              }
            }
            .list-1 {
              position: relative;
            float: left;
            width: 127px;
            margin-right: 15px;
            height: 88px;
            >.list-k{
              display: block;
            padding: 26px 0 38px;
            text-align: right;
              color: #333;
             

            }
            .site-cate {
              position: absolute;
              top: 76px;
              left: -92px;
              z-index: 21;
              width: 234px;
              height: 460px;
              font-size: 14px;
              .hero-ul {
                width: 234px;
                height: 460px;
                position: absolute;
                top: 0;
                left: 0;
                padding: 20px 0;
                background: rgba(105, 101, 101, 0.6);
                z-index: 10;
                li {
                  height: 42px;
                  width: 100%;
                  line-height: 42px;
                  position: relative;
                  >a {
                    padding-left: 30px;
                    color: #fff;
                  }
                  span {
                    position: absolute;
                    top: 12px;
                    right: 20px;
                    font-size: 24px;
                    line-height: 16px;
                    color: #e0e0e0;
                  }
                  .hero-screen {
                    position: absolute;
                    top: -20px;
                    left: 234px;
                    width: 992px;
                    height: 460px;
                    border: 1px solid #e0e0e0;
                    border-left: 0;
                    background: #fff;
                    display: none;
                    .screen-list {
                      width: 245px;
                      float: left;
                      margin: 0;
                      padding: 2px 0;
                      height: 458px;
                      li {
                        float: left;
                        width: 265px;
                        height: 76px;
                        a {
                          display: block;
                          padding: 18px 20px;
                          line-height: 40px;
                          color: #333;
                          width: 40px;
                          height: 40px;
                          img {
                            height: 40px;
                            width: 40px;
                            float: left;
                            margin-right: 12px;
                          }
                          span {
                            float: left;
                            width: 172px;
                            line-height: 40px;
                            overflow: hidden;
                            color: #000;
                            font-size: 16px;
                          }
                        }
                      }
                    }
                  }
                }
                li:hover {
                  background: orange;
                }
                li:hover .hero-screen {
                  display: block;
                }
              }
            }
          }
            a:hover {
              color: orange;
              cursor: pointer;
            }
          }
        }
        .site-search {
          float: right;
          width: 280px;
          margin-top: 25px;
          .search-form {
            height: 50px;
            width: 280px;
            border: 1px solid #b0b0b0;
            position: relative;
            z-index: 10;
            .search-btn {
              display: block;
              position: absolute;
              top: -1px;
              right: -1px;
              height: 50px;
              width: 52px;
              font-size: 20px;
              color: #616161;
              background: #fff;
              border: 1px solid #b0b0b0;
              text-align: center;
              padding-top: 12px;
            }
            .search-btn:hover {
              color: #fff;
              background: orange;
            }
          }
        }
      }
    }
  }
}
